<template>
	<div class="bg-f2f3f5 leaveSpace" >
		<div class="flex gap-20 justify-center max-w-1200 mar-x-auto pad-y-10" style="min-height: calc(100vh - 91px)">
			<div class="left_navs flex-1 pos-s t-80 bg-white pad-10 border-rad-5" style="height: fit-content">
				<div
					v-for="(item, index) in navItems"
					:key="index"
					:class="'nav-item ' + (item.isSelected ? 'nav-item-active' : 'nav-item-default')"
					@click="handleClickMenu(item)"
					:style="{ padding: '0 10px '}"
				>
					<SvgIcons
						:iconClass="item.iconName"
						:style="{
							marginRight: '10px',
							fontSize: '20px',
						}"
					/>
					<span class="text-nowrap">{{ item.name }}</span>
				</div>
			</div>

			<div class="flex-6 bg-white border-rad-5">
				<div class="tab_items flex justify-start mar-t-10 mar-x-20">
					<Tabs :currentTab="currentTab" :tabs="tabs" />
				</div>

				<Lines h="2px" w="100%" bg="#f2f3f5" />

				<div ref="scrollBox">
					<ListContent v-if="!loading"
						:articleLists="articleLists"
						@goDetailPage="goDetailPage"
					/>

					<div v-if="loading" class="mar-t-15 mar-x-20">
						<el-skeleton :rows="4" animated />
					</div>

					<el-empty v-if="!loading && articleLists.length === 0" :image-size="100"></el-empty>
					
					<div v-else-if="articleLists.length > 0 && !loading && total === articleLists.length" class="flex justify-center color-999999 pad-30 font-14">
						<span>没有更多文章了~</span>
					</div>

					<div v-else-if="!loading && !loadingMore && total > articleLists.length" class="flex justify-center color-999999 pad-30 cur-pointer hoverClass font-14" @click="loadMore()">
						<span>点击加载更多文章 >></span>
					</div>

					<div v-loading="loadingMore" v-if="loadingMore" class="mar-t-50"></div>
				</div>
			</div>

			<div class="right_navs flex-1 pos-s t-80 h-200 font-14">
				<div class="right_greet bg-white pad-20 border-rad-5">
					<div class="font-16 font-b-800">{{ greeting }}</div>
					<span class="color-8a919f">点亮在三人行社区的每一天！！！</span>
				</div>

				<div class="color-999999 pad-15">
					<a href="https://beian.miit.gov.cn/" target="blank">皖ICP 备:078564号-1</a>
					<div>
						<span>Copyright</span>
						<span class="font-16">©</span>
						<span>2025 三人行版权所有</span>
					</div>
				</div>
			</div>
		</div>

		<div class="footer flex flex-column justify-center align-center h-60 mar-t-10 pos-s b-0 font-12 color-999999 bg-white">
			<a href="https://beian.miit.gov.cn/" target="blank" class="text-nowrap">皖ICP 备:078564号-1</a>
			<div>Copyright © 2025 三人行版权所有</div>
		</div>
	</div>
</template>

<script>
	import ListContent from '@/components/ListContent/index'
	import Lines from '@/components/Lines/index'
	import Tabs from '@/components/Tabs/index'
	import SvgIcons from '@/components/SvgIcons/index'

    import { mapState } from 'vuex'
    import { getGreeting } from '@/utils/lib'
	import { getClassifyList, getArticleList } from '@/apis/article'

	export default {
		name: 'Home',

		components: {
			Lines,
			SvgIcons,
			Tabs,
			ListContent,
		},

        computed: {
            ...mapState({
                token: state => state.user.token,
				friendList: state => state.user.friendList,
            }),
        },

		data() {
			return {
				articleLists: [], // 文章列表
				loadingMore: false, // 局部“加载更多”
				loading: false, // 加载中
				classifyId: 0, // 综合
                pageSize: 5, // 每页显示条数
				total: 0, // 总数
                currentPage: 1, // 当前页码
				currentTab: 1, // 当前标签
				greeting: '', // 问候语
				isLike: false, // 是否点赞
				row: {}, // 当前文章

				// 标签
				tabs: [
					{ id: 1, name: '推荐' }
				],

				// 导航菜单
				navItems: [
					{ id: 0, name: '综合', isSelected: true, iconName: 'icon_002' }
				], 
			}
		},

        mounted() {
			// 挂载时调用查询分类列表、文章列表、打招呼用语
			this.findClassifyList()
      		this.updateGreeting()
			this.findArticleList()
        },

		methods: {
			// 让滚动条始终在最底部
            scrollToBottom() {
				this.$nextTick(() => {
					const box = this.$refs.scrollBox
					box.scrollTop = box.scrollHeight
				})
            },

			// 查询分类列表
			findClassifyList() {
				getClassifyList().then(res => {
					if (res.code === 200) {
						let data = res.data
						data.forEach(item => item.isSelected = false)
						this.navItems = [...this.navItems, ...data]
					}
				})
			},

			// 点击加载更多文章
			loadMore() {
				this.currentPage ++
				this.findArticleList(true)
			},

			// 查询文章列表接口
			findArticleList(isLoadMore = false) {
				let params = {
					classifyId: this.classifyId,
					pageSize: this.pageSize,
					currentPage: this.currentPage,
				}

				if (isLoadMore) this.loadingMore = true
    				else this.loading = true
				getArticleList(params).then(res => {
					this.loading = false
					this.loadingMore = false

					if (res.code === 200) {
						this.total = res.data.total
						let data = res.data.rows
						data.forEach(item => item.isHideCoverImg = false)
						this.articleLists.push(...data)
					}
				}).catch(err => { 
					this.loading = false
					this.loadingMore = false
				})
			},

			// 更新问候语
			updateGreeting() {
				this.greeting = getGreeting()
			},

			// 点击菜单的回调，获取文章列表
			handleClickMenu(row) {
				this.navItems.forEach(item => {
					item.isSelected = false

					if (item.id === row.id) {
						item.isSelected = true
						this.classifyId = item.id
					}
				})

				this.articleLists = []
				this.currentPage = 1
				this.findArticleList()
			},

			// 跳转到文章详情页
			goDetailPage(row) {
				this.$router.push({
					path: `/details`,
					query: { articleId: row.articleId, userId: row.userId }
				}).catch(err => {})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@media screen and (max-width: 750px) {
		.right_navs {
			display: none;
		}

		.tab_items {
			display: none;
		}

		.left_navs {
			display: none;
		}

		.leaveSpace {
			padding-left: 0;
			padding-right: 0;
		}
	}

	@media screen and (min-width: 750px) {
		.footer {
			display: none;
		}

		.leaveSpace {
			padding-left: 10px;
			padding-right: 10px;
		}
	}

	.right_greet {
		font-family: "微软雅黑";
		white-space: nowrap;
	}

	.nav-item {
		display: flex;
		align-items: center;
		cursor: pointer;
		height: 50px;
		border-radius: 5px;
		font-size: 16px;
	}

	.nav-item-default {
		transition-property: background-color, color;
		transition-duration: 0.3s;
	}

	.nav-item-default:hover {
		background-color: #f7f8fa;
		color: #1e80ff;
	}

	.nav-item-active {
		background-color: #eaf2ff;
		color: #1e80ff;
	}
</style>
